<template>
	<!-- 申请服务点-->
	<view class="Apply_master">
		<!-- #ifdef MP-WEIXIN -->
		<view class="name">
			<text :style="{ color: newColor.color }">*</text>
			<input class="uni-input" maxlength="10" placeholder="请输入姓名" placeholder-style="color:#999999;" @input="setName" @blur="getName" />
		</view>
		<!-- #endif -->
		<!-- #ifdef H5 -->
		<view class="name">
			<text :style="{ color: newColor.color }">*</text>
			<input class="uni-input" maxlength="10" placeholder="请输入姓名" placeholder-style="color:#999999;" v-model="name" @input="setName" />
		</view>
		<!-- #endif -->
		<view class="tel">
			<text :style="{ color: newColor.color }">*</text>
			<input class="uni-input" maxlength="11" type="number" placeholder="请输入手机号" placeholder-style="color:#999999" @blur="getTel" />
		</view>
		<view class="wx">
			<text :style="{ color: newColor.color }">*</text>
			<input class="uni-input" maxlength="16" placeholder="请输入微信号" placeholder-style="color:#999999" @blur="getWx" />
		</view>
		<view class="wx">
			<text :style="{ color: newColor.color }">*</text>
			<input class="uni-input" maxlength="16" type="number" placeholder="请输入粉丝数" placeholder-style="color:#999999" v-model="fans" />
		</view>
		<view class="wx">
			<text :style="{ color: newColor.color }">*</text>
			<input class="uni-input" maxlength="16" type="number" placeholder="请输入管理群数" placeholder-style="color:#999999" v-model="groupnum" />
		</view>
		<view class="wx">
			<text :style="{ color: newColor.color }">*</text>
			<input class="uni-input" maxlength="16" placeholder="请输入粉丝年龄段" placeholder-style="color:#999999" v-model="fansage" />
		</view>
		<view class="wx">
			<text :style="{ color: newColor.color }">*</text>
			<input class="uni-input" maxlength="16" disabled placeholder="请选择粉丝性别偏向" placeholder-style="color:#999999" />
			<van-radio-group :value="fanssex" @change="onChangeSex">
			 <van-radio class="vanradio" name="男" icon-size="16px" :checked-color="newColor.color" >
			 				  男
			 </van-radio>
			 <van-radio class="vanradio" name="女" icon-size="16px" :checked-color="newColor.color" >
			 				  女
			 </van-radio>
			</van-radio-group>
		</view>
		<view class="wx">
			<text :style="{ color: newColor.color }">*</text>
			<input class="uni-input" maxlength="16" disabled placeholder="是否具备服务点" placeholder-style="color:#999999" />
			<van-radio-group :value="thd" @change="onChangeThd">
			 <van-radio class="vanradio" name="是" icon-size="16px" :checked-color="newColor.color" >
			 				  是
			 </van-radio>
			 <van-radio class="vanradio" name="否" icon-size="16px" :checked-color="newColor.color" >
			 				  否
			 </van-radio>
			</van-radio-group>
		</view>
		<view class="wx">
			<text :style="{ color: newColor.color }">*</text>
			<input class="uni-input" maxlength="16" disabled placeholder="是否具备供货能力" placeholder-style="color:#999999" />
			<van-radio-group :value="ghnl" @change="onChangeGhnl">
			 <van-radio class="vanradio" name="是" icon-size="16px" :checked-color="newColor.color" >
			 				  是
			 </van-radio>
			 <van-radio class="vanradio" name="否" icon-size="16px" :checked-color="newColor.color" >
			 				  否
			 </van-radio>
			</van-radio-group>
		</view>
		<!-- <view class="wx">
			<text :style="{ color: newColor.color }">*</text>
			<input class="uni-input" maxlength="16" placeholder="供货类型" placeholder-style="color:#999999" v-model="ghlx" />
		</view> -->
		<view class="dizhi" @tap="openMap">
			<text :style="{ color: newColor.color }">*</text>
			<text style="margin-left: 10upx;color: #999999;">{{ address || '请选择地址' }}</text>
			<image src="../../static/image/right.png" mode=""></image>
		</view>
		<view class="wx">
			<text :style="{ color: newColor.color }">*</text>
			<input class="uni-input" maxlength="16" placeholder="请输入具体地址" placeholder-style="color:#999999" @blur="getaddres" />
		</view>
		<view class="tips">
			<text>备注:</text>
			<textarea placeholder-style="color:#999999" placeholder="(选填)" auto-height @blur="getTips" />
		</view>
		<p class="enter" @tap="onsubmit" :style="{ background: newColor.color }">确认提交</p>
		<ourLoading isFullScreen :active="active" text="提交中..." />
	</view>
</template>

<script>
export default {
	data() {
		return {
			name: '',
			tel: '',
			wx: '',
			tips: '',
			active: false,
			fans: '',
			groupnum: '',
			fansage: '',
			fanssex: '男',
			fansxfqx: '',
			thd: '是',
			ghnl: '是',
			ghlx: '',
			address: '',
			myaddress: '',
			postion: {}
		};
	},
	methods: {
		setName(e) {
			//姓名只能是中文
			console.log(e);
			let data = e.detail.value;
			let newdata = data.replace(/[^\u4e00-\u9fa5]/g, '');
			setTimeout(() => {
				this.name = newdata;
			}, 0);
			return newdata;
		},
		getName(e) {
			this.name = e.detail.value;
		},
		getTel(e) {
			this.tel = e.detail.value;
		},
		getWx(e) {
			this.wx = e.detail.value;
		},
		getTips(e) {
			this.tips = e.detail.value;
		},
		getaddres(e) {
			this.myaddress = e.detail.value;
		},
		onChangeThd(e){
			this.thd = e.detail
		},
		onChangeGhnl(e){
			this.ghnl = e.detail
		},
		onChangeSex(e){
			this.fanssex = e.detail
		},
		// 选择地址
		openMap() {
			// #ifdef MP-WEIXIN
			let that = this;
			uni.chooseLocation({
				success: e => {
					console.log(e);
					that.postion.address = e.address;
					that.postion.latitude = e.latitude;
					that.postion.longitude = e.longitude;
					that.postion.name = e.name;
					that.address = e.name;
				}
			});
			// #endif
			// #ifdef H5
			this.$Router.push({ path: '/pages/home/map' });
			// #endif
		},
		onsubmit() {
			let that = this;
			that.active = true;
			setTimeout(() => {
				that.active = false;
				if (that.name == '') {
					uni.showToast({
						title: '姓名不能为空',
						icon: 'none'
					});
					return;
				} else if (that.tel == '') {
					uni.showToast({
						title: '手机号不能为空',
						icon: 'none'
					});
					return;
				} else if (that.tel.length > 11) {
					uni.showToast({
						title: '请输入正确的手机号',
						icon: 'none'
					});
					return;
				} else if (that.wx == '') {
					uni.showToast({
						title: '微信号不能为空',
						icon: 'none'
					});
					return;
				} else if (that.fans == '') {
					uni.showToast({
						title: '粉丝数不能为空',
						icon: 'none'
					});
					return;
				} else if (that.groupnum == '') {
					uni.showToast({
						title: '管理群数不能为空',
						icon: 'none'
					});
					return;
				} else if (that.fansage == '') {
					uni.showToast({
						title: '粉丝年龄段不能为空',
						icon: 'none'
					});
					return;
				} else if (that.thd == '') {
					uni.showToast({
						title: '请输入是否具备提货点',
						icon: 'none'
					});
					return;
				} else if (that.ghnl == '') {
					uni.showToast({
						title: '请输入是否具备供货能力',
						icon: 'none'
					});
					return;
				}  else if (this.address == '') {
					uni.showToast({
						title: '请选择地址',
						icon: 'none'
					});
					return;
				} else if (this.myaddress == '') {
					uni.showToast({
						title: '具体地址不能为空',
						icon: 'none'
					});
					return;
				}
				console.log(that.name, that.wx, that.tel, that.tips);
				that.bindMaster();
			}, 400);
		},
		bindMaster() {
			this.request(
				'user/addPointLeader',
				{
					type: 2,
					user_name: this.name,
					mobile: this.tel,
					wechat: this.wx,
					remark: this.tips,
					fans: this.fans,
					group_num: this.groupnum,
					fans_age: this.fansage,
					fans_sex: this.fanssex,
					thd: this.thd,
					ghnl: this.ghnl,
					address: this.address + this.myaddress
				},
				'post'
			).then(res => {
				console.log(res);
				if (res.code == 200) {
					uni.showToast({
						title: '申请成功,请等待审核!',
						icon: 'none'
					});
					setTimeout(() => {
						this.$Router.back(1);
					}, 1500);
				}else{
					uni.showToast({
						title: res.msg,
						icon: 'none'
					});
				}
			});
		}
	}
};
</script>

<style lang="scss" scoped>
.Apply_master {
	padding: 20upx 30upx;
	background-color: #ffffff;
	padding-bottom: 50upx;
	> view {
		line-height: 80upx;
		border-bottom: 1upx solid #f2f2f2;
		overflow: hidden;
		> text {
			float: left;
			margin-top: 6upx;
		}
		input {
			height: 80upx;
			line-height: 80upx;
			font-size: 28upx;
			padding-left: 10upx;
		}
	}
	.tips {
		height: auto;
		overflow: hidden;
		text {
			float: left;
			color: #333333;
			font-size: 28upx;
			margin-left: 20upx;
			width: 10vw;
		}
		/* #ifdef MP-WEIXIN */
		textarea {
			float: left;
			font-size: 28upx;
			padding-left: 10upx;
			// padding-bottom: 10upx;
			// line-height: 40upx;
			margin-top: 30upx;
			width: 70vw;
		}
		/* #endif */

		/* #ifdef H5 */
		textarea {
			float: left;
			font-size: 28upx;
			margin-top: 20upx;
			padding-left: 10upx;
			line-height: 40upx;
			width: 70vw;
		}
		/* #endif */
	}
	.enter {
		width: 500upx;
		height: 76upx;
		background: rgba(242, 58, 58, 1);
		border-radius: 38upx;
		font-size: 32upx;
		font-family: Droid Sans Fallback;
		font-weight: 400;
		color: rgba(255, 255, 255, 1);
		line-height: 76upx;
		text-align: center;
		margin: 0 auto;
		margin-top: 150upx;
	}
}
.dizhi {
	overflow: hidden;
	transition: all 0.3s;
	text {
		font-size: 28upx;
		font-family: Droid Sans Fallback;
		font-weight: 400;
		color: rgba(51, 51, 51, 1);
	}
	image {
		width: 12upx;
		height: 22upx;
		float: right;
		margin-top: 30upx;
	}
	&:active {
		transform: scaleX(0.98);
	}
}
/deep/.van-radio{
		margin-top: 10upx;
		font-size: 26upx;
		float: left;
		line-height: 40upx;
		margin-right: 40upx;
		margin-bottom: 20upx;
	}
/deep/.van-radio__label{
	transform: translateY(5upx);
}
</style>
